<template>
    <transition
        class="animate__animated animate__backInUp"
        enter-active-class="animate__animated animate__backInUp"
        leave-active-class="animate__animated animate__backOutDown"
    >
        <div class="info" :style="getStyle()">
            <div
                class="info_item"
                v-for="(item, index) in infoList"
                :style="{ width: item.width || '50%' }"
            >
                <span class="info_item_label"> {{ item.label }}: </span>
                <span class="info_item_value">
                    {{ item.value }}
                </span>
            </div>

            <slot></slot>
        </div>
    </transition>
</template>

<script setup lang="ts">
interface IinfoList {
    label?: string;
    value?: any;
    wodth?: string;
}
const props = defineProps({
    infoList: {
        required: false,
        default: () => [] as any,
    },
    maxHeight: {
        required: false,
        default: () => "500px",
    },
});

function getStyle() {
    return {
        "max-height": props.maxHeight || "",
    };
}
onBeforeMount(() => {});
</script>

<style lang="scss" scoped>
.info {
    font-family: PingFang-SC, PingFang-SC;
    font-weight: 500;
    font-size: 14px;
    padding: 15px;
    color: #606266;
    overflow-y: scroll;
    background: #f5f9ff;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ebebeb;

    &_item {
        line-height: 20px;
        display: flex;
        span {
            display: inline-block;
            @include textChangeRow;
        }
        &_label {
            max-width: 100px;
            text-align: left;
        }
        &_value {
            flex: 1;
            margin-left: 10px;
            padding-right: 10px;
            color: #606266;
        }
    }
    :first-child {
        margin-top: 0px;
    }
}
</style>
